<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产过程管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/layui.css" rel="stylesheet">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">人员信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('person_list.html');">人员信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">物料信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('material_list.html');">物料信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:">设备信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('equipment_list.html');">设备信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">工作任务</a>
                  <a><cite>设备信息管理</cite></a>
                </span>
            </blockquote>

            <!-- 查询条件表单  -->
<!--            action="<%=request.getContextPath()%>/task/list-->
            <form class="layui-form layui-row layui-col-space16" >
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" id="eq_after_sale_search" name="eq_after_sale_search"  placeholder="售后联系人" class="layui-input" lay-affix="clear" style="width:200px" >
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="task_start" name="eq_data_search" readonly placeholder="生产日期" class="layui-input demo-table-search-date" style="width:200px">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-inline layui-input-wrap">
                            <select id="eq_type_search" name="eq_type_search" lay-search style="width: 200px">
                                <option value="">设备类型</option>
                                <option >重型</option>
                                <option >轻型</option>
                                <option >便捷型</option>
                                <option >轻重型</option>
                                <option >便捷式</option>
                                <option >中型</option>
                                <option >其他</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" id="eq_name_search" name="eq_name_search"  placeholder="设备名称" class="layui-input" lay-affix="clear" style="width:200px" >
                    </div>
                </div>
                <div class="layui-col-md2">
                    <button id="search_button" type="button" class="layui-btn" lay-submit lay-filter="demo-table-search" style="width:200px">查询</button>
                </div>
                <div class="layui-col-md2" >
                    <a href="javascript:void(0)" id="btn_task_add" class="layui-btn layui-bg-blue" style="width:200px">下达任务</a>
                </div>
            </form>
            <!--
                            列表展示
			-->
			<table class="layui-table" id="task-table-search"></table>
        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy; 
    </p>
</div>
</body>
<div id="editBox" style="display: none;">
	<form class="layui-form" lay-filter='task-form' action="#">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label width200">序号</label>
            <div class="layui-input-inline">
                <input type="text" id="eq_id" name="eq_id" placeholder="" autocomplete="off" class="layui-input" style="width: 200px">
            </div>
        </div>
	    <div class="layui-form-item">
	        <label class="layui-form-label width200">设备编号</label>
	        <div class="layui-input-inline">
	            <input type="text" id="eq_number" name="eq_number" lay-verify="required|number" placeholder="请输入设备的编号" autocomplete="off" class="layui-input" style="width: 200px">
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width200">设备名称</label>
	            <div class="layui-input-inline">
	                <input type="text" id="eq_name" name="eq_name" lay-verify="required" placeholder="请输入设备的名称" autocomplete="off" class="layui-input" style="width: 200px">
	            </div>
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width200">设备类型</label>
	            <div class="layui-input-inline layui-input-wrap">
                    <select id="add_eq_type" name="eq_type" lay-verify="required" lay-search style="width: 200px">
                        <option value="">直接选择或搜索选择</option>
                        <option >重型</option>
                        <option >轻型</option>
                        <option >便捷型</option>
                        <option >轻重型</option>
                        <option >便捷式</option>
                        <option >中型</option>
                        <option >其他</option>
                    </select>
	            </div>
            </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width200">设备生产商</label>
	            <div class="layui-input-inline layui-input-wrap">
	                <input  type="text" name="eq_producer" id="eq_producer" lay-verify="required" placeholder="请输入设备生产商的名称" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
	        </div>
	    </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">生产日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input  type="text" name="eq_data" id="eq_data" lay-verify="date|required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width200">保质期</label>
	            <div class="layui-input-inline">
                    <input  type="text" name="eq_store_data" lay-verify="required" id="eq_store_date" placeholder="请输入设备的保质期(数字+年)" autocomplete="off" class="layui-input" style="width: 200px">
	            </div>
	        </div>
	    </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">售后联系人</label>
                <div class="layui-input-inline">
                    <input type="text" name="eq_after_sale" id="eq_after_sale" lay-verify="required" placeholder="请输入售后联系人" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="eq_phone" id="eq_phone" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">质保说明</label>
                <div class="layui-input-inline">
                    <input type="text" name="eq_introduction" id="eq_introduction" lay-verify="required" placeholder="请输入质量凭证信息(在保/失效)" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
	    <div class="layui-form-item">
	        <div class="layui-input-block">
	            <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
	            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	        </div>
	    </div>
	</form>
</div>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
	<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
  </div>
</script>
<script type="text/javascript" src="../js/layui.js"></script>
<script>
    layui.use( function(){
    	var laydate = layui.laydate;
    	var dropdown = layui.dropdown;
    	var $ = layui.$;
    	var layer = layui.layer;
    	var util = layui.util;
    	var table = layui.table;
    	var form = layui.form;	
    	
    	// 渲染
    	laydate.render({
    	    elem: '#task_start'
    	});
    	laydate.render({
    	    elem: '#task_end'
    	});

		// 创建表格实例
		let mainTable = table.render({
			id: 'test1',
			elem: '#task-table-search',
			url: 'http://localhost:8888/selectEquipment', // 此处为静态模拟数据，实际使用时需换成真实接口
            method:"post",
            headers: {'Access-Control-Allow-Origin': '*'},
            cols: [[
			  {type: 'checkbox', title: '', fixed: true}, // 单选框
			  {field:'eq_id', title: 'ID', width:80, sort: true, fixed: true},
			  {field:'eq_number', title: '设备编号', minWidth:80,sort:true},
			  {field:'eq_name', title: '设备名称', minWidth:80},
			  {field:'eq_type', title: '设备类型', width:100},
			  {field:'eq_producer', title: '设备生产商', minWidth: 100},
			  {field:'eq_data', title: '生产日期', minWidth: 120},
			  {field:'eq_store_data', title: '保质期', sort: true, width:100},
                {field:'eq_after_sale', title: '售后联系人', sort: true, width:120},
                {field:'eq_phone', title: '联系电话', sort: true, width:140},
                {field:'eq_introduction', title: '质保说明', sort: true, width:120},
                {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
			]],
			page: true,
            limit: 15, // 设置默认值为15
            loading: false,
            limits: [5,10,15],
			height: 'full'
		});
        $("#search_button").click(function(){
            var eq_name_search = $("#eq_name_search").val();
            var task_start = $("#task_start").val();
            var eq_after_sale_search = $("#eq_after_sale_search").val();
            var eq_type_search = $("#eq_type_search").val();
            console.log(eq_name_search);
            console.log(task_start);
            console.log(eq_after_sale_search);
            table.reload('test1', {
                url: 'http://localhost:8888/selectByName',
                where: {
                    eq_name: eq_name_search,
                    eq_data: task_start,
                    eq_after_sale: eq_after_sale_search,
                    eq_type:eq_type_search
                },
                // page: true,
                // limit: 15, // 设置默认值为15
                // loading: false,
                // limits: [5,10,15],
            });
        });

		// 触发单元格工具事件
		table.on('tool(test1)', function(obj){ // 双击 toolDouble
            console.log(obj);
		// 触发单元格工具事件
			var rowData = obj.data; // 获得当前行数据
			if(obj.event === 'update'){
			let editBox = layer.open({
					title: `<button type="button" class="layui-btn layui-bg-gray">
							<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b> 
						  </button>
					`,
					type: 1,
					area: ['600px','500px'],
					content: $('#editBox').html(),
					success: function(){
					  // 对弹层中的表单进行初始化渲染
                      // var filed = data.field; //获取表单的字段
					  form.render();
					  // 表单提交事件
					  form.on('submit(form-submit)', function(data){
                          var filed = data.field;
						 // 获取表单字段值
                          console.log(data);

                          // console.log(filed);
						$.ajax({
                            url:"http://localhost:8888/saveEquipment",
                            type:"post",
                            headers: {'Access-Control-Allow-Origin': '*'},
                            data:{
                                // 这个是后端接受的类的字段数据
                                eq_id:rowData.eq_id,
                                eq_number:filed.eq_number,
                                eq_name:filed.eq_name,
                                eq_type:filed.eq_type,
                                eq_producer:filed.eq_producer,
                                eq_data:filed.eq_data,
                                eq_store_data:filed.eq_store_data,
                                eq_after_sale:filed.eq_after_sale,
                                eq_phone:filed.eq_phone,
                                eq_introduction:filed.eq_introduction
                            },
                            success: function f(e) {
                                layer.msg('操作成功');
                                layer.close(editBox); // 关闭对话框
                                mainTable.reload(); // 重新加载表格数据
                            }
                        });
						return false; // 阻止默认 form 跳转
					  });
					}
				});
				laydate.render({
                    elem: '#eq_data'
                });
				//对表单元素进行赋值
				layui.form.val('task-form', {
                    "eq_id":rowData.eq_id,
                    "eq_number":rowData.eq_number,
                    "eq_name":rowData.eq_name,
                    "eq_type":rowData.eq_type,
                    "eq_producer":rowData.eq_producer,
                    "eq_data":rowData.eq_data,
                    "eq_store_data":rowData.eq_store_data,
                    "eq_after_sale":rowData.eq_after_sale,
                    "eq_phone":rowData.eq_phone,
                    "eq_introduction":rowData.eq_introduction
				});
			} else if(obj.event === 'delete'){
				layer.confirm('确定要删除该行数据吗？', function(index){
                    $.ajax({
                        url:"http://localhost:8888/deleteEquipment",
                        type:"post",
                        data:{
                            eq_id:rowData.eq_id,
                        },
                        success:function (e) {
                            layer.msg("操作成功");
                            mainTable.reload();
                        }
                    })
				});
			}
	  }); // end table.on('tool(test1)')
        $('#btn_task_add').click(function(){
			editBox = layer.open({
				title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b> 
					  </button>
				`,
				type: 1,
				area: ['600px','500px'],
				content: $('#editBox').html(),
				success: function(){
				  // 对弹层中的表单进行初始化渲染
				  form.render();
				  // 表单提交事件
                    var data1 = {
                        "eq_id":-1,
                        "eq_number":"00008088",
                        "eq_name":"起重机"
                    }
                    layui.form.val('task-form',{
                        "eq_id":data1.eq_id,
                        "eq_number":data1.eq_number,
                        "eq_name":data1.eq_name
                    })

                    // 上述的语句是在新建表单任务的时候,给表单初始化一些值而已
				  form.on('submit(form-submit)', function(data1){
                      // 这里也可以做编辑的判定
					var filed = data1.field; // 获取表单字段值
                      console.log(filed);
                      console.log(filed.eq_id);
					// 此处可执行 Ajax 等操作
					var data = layui.form.val('task-form');
                      if (/^\d{1,8}$/.test(filed.eq_number)){

                      }else{
                          layer.msg("请输入正确的设备编号");
                          return false;
                      }

                      if (/^[\u4e00-\u9fa5]+$/.test(filed.eq_name)){

                      }else{
                          layer.msg("请输入正确的设备名称");
                          return false;
                      }

                      if (/^[\u4e00-\u9fa5]+$/.test(filed.eq_producer)){

                      }else{
                          layer.msg("请输入正确的设备生产商");
                          return false;
                      }

                      if (/^\d+年$/.test(filed.eq_store_data)){

                      }else{
                          layer.msg("请输入正确的设备存储期限");
                          return false;
                      }

                      if(/^[\u4e00-\u9fa5]+$/.test(filed.eq_after_sale)){

                      }else{
                          layer.msg("请输入正确的设备售后服务人");
                          return false;
                      }

                      if (filed.eq_introduction == '在保' || filed.eq_introduction == '失效'){

                      }else{
                          layer.msg("请输入正确的设备状态");
                          return false;
                      }
                      $.ajax({
                        url: "http://localhost:8888/saveEquipment",
                        type: "post",
                        headers: {'Access-Control-Allow-Origin': '*'},
                        data:{
                            eq_id:filed.eq_id,
                            eq_number:filed.eq_number,
                            eq_name:filed.eq_name,
                            eq_type:filed.eq_type,
                            eq_producer:filed.eq_producer,
                            eq_data:filed.eq_data,
                            eq_store_data:filed.eq_store_data,
                            eq_after_sale:filed.eq_after_sale,
                            eq_phone:filed.eq_phone,
                            eq_introduction:filed.eq_introduction
                        },
                        success:function (e) {
                            layer.msg('操作成功！');
                            layer.close(editBox);
                            mainTable.reload();
                        }
                    })
					return false; // 阻止默认 form 跳转
				  });
                }
            });
            laydate.render({
                elem:'#eq_data'
            });
		});
	}); // end layui.use(.....)
</script>
<script>
    function goPage(url) {
        window.location.href = url;
    }
</script>
</html>